<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="${ pageContext.request.contextPath }/js/css/bootstrap.css">
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/jquery-1.11.1.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/bootstrap.js"></script>
<style type="text/css">
table {
	text-align: center;
}

body {
	background-image:
		url("${ pageContext.request.contextPath }/files/beijing.jpg");
	width: 80%;
	text-align: center;
	margin: 0 auto;
}
</style>
<script type="text/javascript">
	$(function() {
		$('#tjkc').on('click', function() {
			$('#neirong').load('khxx.jsp');
		}), $('#yxkc').on('click', function() {
			$('#neirong').load('khywbl.jsp');
		});
	})
</script>
</head>
<br />
<br />
<body>
	<%@include file="/html/nav.html"%>
	<div class="page-header">
		<h1>教师：${teacher.name}</h1>
	</div>
	<div class="container">
		<div class="col-xs-3">
			<div class="list-group" style="align: center">
				<a href="#" class="list-group-item text-center"
					data-toggle="collapse" data-parent="#test1" data-target="#aaa">添加课程</a>
				<a href="#" class="list-group-item text-center"
					data-toggle="collapse" data-parent="#test1" data-target="#bbb">已选课程</a>
			</div>
		</div>
		<div class="col-xs-7">
			<div class="panel-group" id="test1">
				<div class="panel">
					<div class="panel panel-primary collapse" id="aaa">
						<form action="tea.search.course" method="post" id="form">
							<div class="panel-heading">
								<div class="row">
									<div class="col-xs-3">
										<span class="glyphicon glyphicon-th-list"></span> 课程查询
									</div>
									<div class="col-xs-8">
										<div class="input-group">
											<input type="text" class="form-control" name="field">
											<div class="input-group-btn">
												<select class="btn btn-default" style="height: 34px"
													name="fieldType">
													<option>课程名</option>
													<option>学生数量</option>
													<option>授课老师</option>
												</select>
												<button id="query" type="submit" class="btn btn-default">
													<span class="glyphicon glyphicon-search"
														style="height: 20px"> </span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
						<div class="panel-body">
							<table class="table table-bordered" border="1" id="tt">
								<tr>
									<th>课程名</th>
									<th>学生数量</th>
									<th>创建时间</th>
									<th>添加课程</th>
								</tr>
								<c:forEach items="${courseList}" var="course">
									<tr>
										<td>${course.courseName}</td>
										<td>${course.shuliang}</td>
										<td>${course.createDate}</td>
										<td><div class="modal" id="modaly${course.courseId}">
												<div class="modal-dialog"
													style="width: 500px; margin-top: 150px">
													<div class="modal-content">
														<div class="modal-header"
															style="background-color: royalblue">添加确定</div>
														<div class="modal-body">确定要添加课程[
															${course.courseName} ]吗？</div>
														<div class="modal-footer">
															<a
																href="/AAA/tea.append.course?couId=${course.courseId}&teaId=${teacher.id}"
																class="btn btn-primary">确认</a> <a href=""
																class="btn btn-default">取消</a>
														</div>
													</div>
												</div>
											</div> <a class="btn btn-primary" data-toggle="modal"
											data-target="#modaly${course.courseId}">确定</a></td>
									</tr>
								</c:forEach>
							</table>
							<a href="searChcourse?page=1">首页</a>&nbsp&nbsp<a
								href="searChcourse?page=${page-1}">上一页</a>&nbsp&nbsp<a
								href="searChcourse?page=${page+1}">下一页</a>&nbsp&nbsp<a
								href="#?page=0">末页</a>
						</div>
					</div>
				</div>
				<div class="panel">
					<div class="panel panel-primary collapse" id="bbb">
						<div class="panel-heading">已选课程列表</div>
						<div class="panel-body">
							<table class="table table-bordered" border="1">
								<tr>
									<th>课程名</th>
									<th>学生数量</th>
								</tr>
								<c:forEach items="${seeTeacher}" var="teacher">
									<tr>
										<td>${teacher.name}</td>
										<td>${teacher.pwd}</td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

